<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>统一认证平台</title>
    <link th:href="@{/webjars/bootstrap/5.3.8/css/bootstrap.min.css}" rel="stylesheet">
</head>
<body>
<main class="container-fluid bg-light vh-100">
    <header class="row bg-white py-3 mb-3 border-bottom shadow-sm">
        <span class="fs-4 fw-bold text-primary">统一认证平台</span>
    </header>
    <article class="row justify-content-center align-items-center h-75">
        <div class="card shadow-lg col-6 p-0">
            <h1 class="fw-bold m-5 text-center">账号密码登录</h1>
            <div class="row justify-content-center m-0">
                <div class="card-body p-4 m-4 col-5">
                    <form method="post" th:action="@{/oauth2/login}">
                        <div class="form-group mb-4">
                            <label class="mb-2" for="username">用户名</label>
                            <input id="username" type="text" class="form-control" name="username" placeholder="请输入用户名" autofocus>
                        </div>
                        <div class="form-group mb-4">
                            <div class="mb-2">
                                <label for="password">密码</label>
                                <a href="forgot.html" class="float-end">
                                    忘记密码?
                                </a>
                            </div>
                            <input id="password" type="password" class="form-control" name="password" placeholder="请输入密码">
                        </div>
                        <div class="form-group mb-4">
                            <div class="mb-2">
                                <a href="forgot.html">
                                    短信验证码登录
                                </a>
                            </div>
                        </div>
                        <div class="form-group mb-4 d-grid">
                            <button type="submit" class="btn btn-primary btn-block fw-bold btn-lg">授权并登录</button>
                        </div>
                    </form>
                </div>
                <div class="col-auto border-start border-dark mb-4 text-center p-0"></div>
                <div class="card-body p-4 m-4 col-5">
                    <div class="card-title fw-bold mb-4">
                        <img th:src="${clientAvatar}" class="rounded-circle" alt="客户端头像" width="50" height="50" />
                        <span th:text="${clientName}"></span>
                    </div>
                    <div class="fw-bold mb-4">
                        您正在授权<span th:text="${clientName}"></span>登录。授权登录后，<span th:text="${clientName}"></span>将获得以下权限:
                    </div>
                    <div class="mb-4">
                        <ul th:each="scope: ${scopes}" class="text-muted">
                            <li class="mb-2" th:text="${scope}"></li>
                        </ul>
                    </div>
                    <div class="text-muted mb-4">
                        授权给“<span th:text="${clientName}"></span>”使用的数据由其隐私政策管理，您可随时在账号隐私中心取消授权。
                    </div>
                </div>
            </div>
            <div class="card-footer py-3 border-0">
                没有账号? <a href="register.html">注册</a>
            </div>
        </div>
    </article>
</main>
</body>
</html>

